import Highcharts from "highcharts";
import HighchartsReact from "highcharts-react-official";
import { useEffect, useState } from "react";
import zonghetaishi from "../../static/images/zonghetaishi.png";
import "./Comprehensive_situational.scss";
import { Progress } from 'antd';
const Comprehensive_situational = () => {
    const myimg = {
        backgroundImage: "url(" + zonghetaishi + ")",
        backgroundSize: 'cover'
    }
    //当日能耗情况
    const energy = {
        chart: {
            type: 'area',
            height: 220,
            backgroundColor: "rgba(0,0,0,0)",
            color: '#7E8996'
        },
        colors: ['#5B8FF9', '#5AD8A6', '#5D7092', '#F6BD16', '#E8684A'],
        credits: {
            enabled: false
        },
        legend: {
            enabled: true, //不显示图例
            align: "right", //图例显示位置
            verticalAlign: "top",
            x: 10,
            // y: 30,
            itemStyle: {
                color: "#ffffff", //修改饼图图例的文字颜色
            },
        },
        title: {
            text: ''
        },
        subtitle: {
            text: ''
        },
        xAxis: {
            categories: ['1750', '1800', '1850', '1900', '1950', '1999', '2050'],
            tickmarkPlacement: 'on',
            title: {
                enabled: false
            }
        },
        yAxis: {
            title: {
                text: '',
            },
            labels: {
                formatter: function () {
                    return this.value / 1000;
                }
            }
        },
        tooltip: {
            color: '#7E8996',
            split: true,

            valueSuffix: ' millions'
        },
        plotOptions: {
            area: {
                stacking: 'normal',
                lineColor: '#162A41',
                lineWidth: 1,
                marker: {
                    lineWidth: 1,
                    lineColor: '#666666'
                }
            }
        },
        series: [{
            name: '煤',
            data: [502, 635, 809, 947, 1402, 3634, 5268]
        }, {
            name: '气',
            data: [106, 107, 111, 133, 221, 767, 1766]
        }, {
            name: '油',
            data: [163, 203, 276, 408, 547, 729, 628]
        }, {
            name: '电',
            data: [18, 31, 54, 156, 339, 818, 1201]
        }, {
            name: '热',
            data: [2, 2, 2, 6, 13, 30, 46]
        }]
    }
    //企业资质情况
    const qualifications = {
        chart: {
            height: 220,
            type: 'column',
            backgroundColor: "rgba(0,0,0,0)",
            color: '#7E8996'
        },
        colors: ['#5080DE', '#EA9524'],
        credits: {
            enabled: false
        },
        legend: {
            enabled: true, //不显示图例
            align: "right", //图例显示位置
            verticalAlign: "top",
            itemStyle: {
                color: "#ffffff", //修改饼图图例的文字颜色
            },
        },
        title: {
            text: ''
        },
        subtitle: {
            text: ''
        },
        xAxis: {
            categories: [
                '2015',
                '2016',
                '2017',
                '2018',
                '2019',
                '2020',
                '2021'
            ],
            crosshair: true
        },
        yAxis: {
            min: 0,
            title: {
                text: ''
            }
        },
        tooltip: {
            headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
            pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
            footerFormat: '</table>',
            shared: true,
            useHTML: true
        },
        plotOptions: {
            column: {
                pointPadding: 0.2,
                borderWidth: 0
            }
        },
        series: [{
            name: '科技企业',
            data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6]

        }, {
            name: '高新企业',
            data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0]

        }]
    }
    //面积
    const area = {
        chart: {
            height: 220,
            type: 'column',
            backgroundColor: "rgba(0,0,0,0)",
            color: '#7E8996'
        },
        colors: ['#5080DE'],
        credits: {
            enabled: false
        },
        legend: {
            enabled: false, //不显示图例
        },
        title: {
            text: ''
        },
        subtitle: {
            text: ''
        },
        xAxis: {
            categories: [
                '2015',
                '2016',
                '2017',
                '2018',
                '2019',
                '2020',
                '2021'
            ],
            crosshair: true
        },
        yAxis: {
            min: 0,
            title: {
                text: ''
            }
        },
        tooltip: {
            headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
            pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
            footerFormat: '</table>',
            shared: true,
            useHTML: true
        },
        plotOptions: {
            column: {
                pointPadding: 0.2,
                borderWidth: 0
            }
        },
        series: [{
            name: '',
            data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6]

        }]
    }
    //泊车情况
    const parking = {
        chart: {
            type: 'pie',
            height: 220,
            color: '#fff',
            backgroundColor: "rgba(0,0,0,0)",
        },
        legend: {
            enabled: false, //不显示图例
        },
        colors: ['#4D7BD5', '#F59A23'],
        credits: {
            enabled: false
        },
        tooltip: {
            enabled: false
        },
        title: {
            text: '<p>已使用</p><br/><p>46%</p><br/><p>车位分配</p>',
            align: 'center',
            verticalAlign: 'middle',
            y: 18,
        },
        plotOptions: {//去掉饼图指示线
            pie: {
                dataLabels: {
                    enabled: false,
                }
            }
        },
        series: [{
            type: 'pie',
            innerSize: '60%',
            data: [
                ['煤', 40],
                ['气', 21],
            ]
        }]
    }
    //实时车辆信息
    const Vehicle = () => {
        return (
            <div className="csvhicle">
                <div>
                    <div>进场</div>
                    <span>苏A233JK</span>
                    <span>今天16:53</span>
                </div>
                <div>
                    <div>进场</div>
                    <span>苏A233JK</span>
                    <span>今天16:53</span>
                </div>
                <div>
                    <div>进场</div>
                    <span>苏A233JK</span>
                    <span>今天16:53</span>
                </div>
                <div>
                    <div>进场</div>
                    <span>苏A233JK</span>
                    <span>今天16:53</span>
                </div>
                <div>
                    <div>进场</div>
                    <span>苏A233JK</span>
                    <span>今天16:53</span>
                </div>
                <div>
                    <div>进场</div>
                    <span>苏A233JK</span>
                    <span>今天16:53</span>
                </div>
                <div>
                    <div>进场</div>
                    <span>苏A233JK</span>
                    <span>今天16:53</span>
                </div>
                <div>
                    <div>进场</div>
                    <span>苏A233JK</span>
                    <span>今天16:53</span>
                </div>
            </div>
        )
    }
    return (<div className="ComprehensiveSituational">
        <div>
            <div>
                <p>当日能耗情况</p>
                <div className="csxian"></div>
                <div>
                    <HighchartsReact highcharts={Highcharts} options={energy} />
                </div>
            </div>
            <div>
                <p>企业资质情况</p>
                <div className="csxian"></div>
                <div>
                    <HighchartsReact highcharts={Highcharts} options={qualifications} />
                </div>
            </div>
            <div>
                <p>服务统计</p>
                <div className="csxian"></div>
                <div className="csjingdu">
                    <div>
                        <div className="csjingdudiv1">
                            <div></div>
                            <p>已完结:870</p>
                        </div>
                        <div className="csjingdudiv2">
                            <div></div>
                            <p>未完结:163</p>
                        </div>
                    </div>
                    <Progress percent={83.2} steps={30} size="large" strokeColor="#02A7F0" />
                </div>
            </div>
        </div>
        <div>
            <div style={myimg}>
            </div>
            <div className='delpoint'>
                <div>
                    <div>
                        <p>
                            园区总面积/m²
                        </p>
                        <p>
                            7512
                        </p>
                    </div>
                    <div>
                        <p>
                            总租赁面积/m²
                        </p>
                        <p>
                            6353
                        </p>
                    </div>
                    <div>
                        <p>
                            园区总产值/万元
                        </p>
                        <p>
                            75683
                        </p>
                    </div>
                    <div>
                        <p>
                            入驻企业总数/家
                        </p>
                        <p>
                            75683
                        </p>
                    </div>
                </div>
                <HighchartsReact highcharts={Highcharts} options={area} />
            </div>
        </div>
        <div>
            <div>
                <p>泊车情况</p>
                <div className="csxian"></div>
                <div className="bingpu">
                    <div>
                        <div>
                            <p>园区内总停车位</p>
                            <p>2232</p>
                        </div>
                        <div>
                            <p>已使用停车位</p>
                            <p>1028</p>
                        </div>
                    </div>
                    <div>
                        <HighchartsReact highcharts={Highcharts} options={parking} />
                    </div>
                </div>
            </div>
            <div>
                <p>实时车辆信息</p>
                <div className="csxian"></div>
                <div>
                    <Vehicle />
                </div>
            </div>
        </div>
    </div>)
}

export default Comprehensive_situational